<template>
	<div>
		<el-dialog title="投递文章" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" @closed="resetForm('form')">
			<div class="move-tree">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="投递到">
						<div>
							<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						</div>
						<el-checkbox-group v-model="checkedIds" @change="handleCheckedIds">
							<div v-for="item in filterData" :key="item.id" class="sheng" style="width: 440px" :title="columnPathfilter(item.namePath)">
								<el-checkbox :label="item.id" style="line-height: 30px">
									{{ columnPathfilter(item.namePath) }}
								</el-checkbox>
							</div>
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { cloneDeep, compact } from 'lodash';
export default {
	data() {
		return {
			dialogVisible: false,
			form: {
				id: '',
				classifyIds: []
			},
			tableData: [],
			checkedIds: [],
			filterData: [],
			checkAll: false,
			isIndeterminate: true
		};
	},
	computed: {
		columnPathfilter() {
			return (v) => {
				let nw = compact(v.split('/'));
				return nw.join('/');
			};
		}
	},
	mounted() {
		this.$bus.$on('articleMove', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('articleMove');
	},
	methods: {
		//显示弹窗
		init(row) {
			this.form.id = row.id;
			this.setParentData(row);
			this.dialogVisible = true;
		},
		setParentData(row) {
			this.checkedIds = row.classifyIds;
			this.tableData = this.$store.getters.columnData;
			this.filterData = this.flatObj(cloneDeep(this.tableData)).filter((v) => v.classType == 11);
			if (!row) return;
			this.tableData = this.tableData.filter((v) => v.id != row.id);
		},
		async submitForm() {
			this.form.classifyIds = this.checkedIds;
			if (this.form.classifyIds.length == 0) {
				this.warnMsg('请选择栏目');
				return;
			}
			await this.$store.dispatch('updateNewsContents', this.form);
			this.done();
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('refreshNewsContentsList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		},
		handleCheckAllChange(val) {
			this.checkedIds = val ? this.filterData.map((v) => v.id) : [];
			this.isIndeterminate = false;
		},
		handleCheckedIds(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.filterData.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.filterData.length;
		}
	}
};
</script>
<style scoped></style>
